<%--
  Created by IntelliJ IDEA.
  User: HKemmm
  Date: 2022/2/20
  Time: 18:16
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="robots" content="noindex, follow"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, follow"/>
    <!--All Css Here-->

    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/static/moban/css/bootstrap.min.css">
    <!-- Linearicon CSS-->
    <link rel="stylesheet" href="/static/moban/css/linearicons.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/static/moban/css/font-awesome.min.css">

    <!-- Animate CSS-->
    <link rel="stylesheet" href="/static/moban/css/animate.css">
    <!-- Owl Carousel CSS-->
    <link rel="stylesheet" href="/static/moban/css/owl.carousel.min.css">
    <!-- Slick CSS-->
    <link rel="stylesheet" href="/static/moban/css/slick.css">
    <!-- Meanmenu CSS-->
    <link rel="stylesheet" href="/static/moban/css/meanmenu.min.css">
    <!-- Easyzoom CSS-->
    <link rel="stylesheet" href="/static/moban/css/easyzoom.css">
    <!-- Venobox CSS-->
    <link rel="stylesheet" href="/static/moban/css/venobox.css">
    <!-- Jquery Ui CSS-->
    <link rel="stylesheet" href="/static/moban/css/jquery-ui.css">
    <!-- Nice Select CSS-->
    <link rel="stylesheet" href="/static/moban/css/nice-select.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="/static/moban/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/static/moban/css/responsive.css">
    <!-- Modernizr Js -->
    <script src="/static/moban/js/vendor/modernizr-2.8.3.min.js"></script>


    <%--    <script src="/static/js/user.js"></script>--%>

    <style>
        .right-icon {
            margin-top: 22px;
        }

        .search-dropdown > form {
            margin-bottom: 0;
        }

        .product-action > ul > li > a {
            height: 30px;
            margin-top: 15px;
        }

        #main-product img {
            height: 270px;
        }

        .product-box {
            float: left;
        }

        .img-div {
            width: 90px;
            height: 85px;

            margin-left: 5px;
            float: left;

        }

        .img-div img {
            width: 80px;
            height: 80px;
            border: 1px solid #d4d4d4;
        }

        #single-product-menu {
            width: 380px;
            height: 84px;
            /*border: 1px red solid;*/
            overflow: hidden;
        }

        #product-img {
            height: 375px;
            width: 375px;
        }
    </style>
</head>
<body>


<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<div class="wrapper">
    <!--Header Area Start-->
    <header>
        <div class="header-container">
            <div class="header-area header-absolute header-sticky pt-30 pb-30">
                <div class="container-fluid pl-50 pr-50">
                    <div class="row">
                        <!--Header Logo Start-->
                        <div class="col-lg-3 col-md-3">
                            <div class="logo-area">
                                <a href="/page/index.jsp">
                                    <img src="/static/moban/img/logo/logo.png" alt="">
                                </a>
                            </div>
                        </div>
                        <!--Header Logo End-->
                        <!--Header Menu And Mini Cart Start-->
                        <div class="col-lg-9 col-md-9 text-lg-right">
                            <!--Main Menu Area Start-->
                            <div class="header-menu">
                                <nav>
                                    <ul class="main-menu">
                                        <li><a href="/page/index.jsp">首页</a></li>
                                        <li><a href="shop.html">商品</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <!--Main Menu Area End-->
                            <!--Header Option Start-->
                            <div class="header-option">
                                <div class="mini-cart-search">
                                    <div class="mini-cart">
                                        <a href="/shop/car?id=${sessionScope.User.id}">
                                                <span class="cart-icon">
                                                   <span class="cart-quantity">2</span>
                                                </span>
                                            <span class="cart-title">购物车 <br><strong>190.00元</strong></span>
                                        </a>
                                    </div>
                                    <div class="header-search">
                                        <div class="search-box">
                                            <a href="#" class="right-icon"><i class="fa fa-search"></i></a>
                                            <div class="search-dropdown">
                                                <form action="#">
                                                    <input name="search" id="search" placeholder=""
                                                           value="Search product..."
                                                           onblur="if(this.value==''){this.value='Search product...'}"
                                                           onfocus="if(this.value=='Search product...'){this.value=''}"
                                                           type="text">
                                                    <button type="submit"><i class="fa fa-search"></i></button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="currency">
                                        <div class="currency-box">
                                            <a href="#" class="right-icon"><i class="fa fa-th"></i></a>
                                            <div class="currency-dropdown">
                                                <input type="hidden" id="userId" value="${sessionScope.User.id}">
                                                <ul class="menu-top-menu">
                                                    <li><a href="/shop/centre">帐户名:${sessionScope.User.name}</a>
                                                    </li>
                                                    <li><a href="#">收藏夹</a></li>
                                                    <li><a href="/shop/car?id=${sessionScope.User.id}">购物车</a>
                                                    </li>

                                                    <c:if test="${sessionScope.User.id != null}">
                                                        <li><a href="#">退出</a></li>
                                                    </c:if>

                                                    <c:if test="${sessionScope.User == null}">
                                                        <li><a href="#">登录</a></li>
                                                    </c:if>
                                                </ul>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Header Option End-->
                        </div>
                        <!--Header Menu And Mini Cart End-->
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <!--Mobile Menu Area Start-->
                            <div class="mobile-menu d-lg-none"></div>
                            <!--Mobile Menu Area End-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--Header Area End-->
    <!--Slider Area Start-->
    <div class="slider-area">
        <div class="hero-slider owl-carousel">
            <!--Single Slider Start-->
            <div class="single-slider" style="background-image: url(/static/moban/img/slider/home1-slider1.jpg)">
                <div class="slider-progress"></div>
                <div class="container">
                    <div class="hero-slider-content">
                        <h1>Perfect Plant <br> Sale In LookBook</h1>
                        <div class="slider-border"></div>
                        <p>Captain America: Civil War Christopher Markus and Stephen McFeely see the Hulk as the game
                            over moment. </p>
                        <div class="slider-btn">
                            <a href="#">Shop Collection <i class="fa fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Single Slider End-->
            <!--Single Slider Start-->
            <div class="single-slider" style="background-image: url(/static/moban/img/slider/home1-slider2.jpg)">
                <div class="slider-progress"></div>
                <div class="container">
                    <div class="hero-slider-content">
                        <h1>2018 Plant Trend</h1>
                        <div class="slider-border"></div>
                        <p>Captain America: Civil War Christopher Markus and Stephen McFeely see the Hulk as the game
                            over moment. </p>
                        <div class="slider-btn">
                            <a href="#">Shop Collection <i class="fa fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Single Slider End-->
        </div>
    </div>
    <!--Slider Area End-->
    <!--Feature Area Start-->
    <div class="feature-area mt-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <!--Single Feature Start-->
                    <div class="single-feature mb-35">
                        <div class="feature-icon">
                            <span class="lnr lnr-rocket"></span>
                        </div>
                        <div class="feature-content">
                            <h3>FREE SHIPPING</h3>
                            <p>ALL ORDER OVER $100</p>
                        </div>
                    </div>
                    <!--Single Feature End-->
                </div>
                <div class="col-lg-4 col-md-6">
                    <!--Single Feature Start-->
                    <div class="single-feature mb-35">
                        <div class="feature-icon">
                            <span class="lnr lnr-phone"></span>
                        </div>
                        <div class="feature-content">
                            <h3>24/7 DEDICATED SUPPORT</h3>
                            <p>0123 456 789</p>
                        </div>
                    </div>
                    <!--Single Feature End-->
                </div>
                <div class="col-lg-4 col-md-6">
                    <!--Single Feature Start-->
                    <div class="single-feature mb-35">
                        <div class="feature-icon">
                            <span class="lnr lnr-redo"></span>
                        </div>
                        <div class="feature-content">
                            <h3>MONEY BACK</h3>
                            <p>IF THE ITEM DIDN’T SUIT YOU</p>
                        </div>
                    </div>
                    <!--Single Feature End-->
                </div>
            </div>
        </div>
    </div>
    <!--Feature Area End-->
    <!--Categories Area Start-->
    <div class="categories-area mt-115">
        <div class="container">
            <div class="row">
                <!--Section Title Start-->
                <div class="col-12">
                    <div class="section-title text-center mb-35">
                        <span>The Best collection</span>
                        <h3>Shop By Categories</h3>
                    </div>
                </div>
                <!--Section Title End-->
            </div>
        </div>
        <div class="container-fluid pl-50 pr-50">
            <div class="row">
                <div class="cat-1 col-md-4">
                    <div class="categories-img img-full mb-30">
                        <a href="#"><img id="category1" src="/myimg/c1.png"
                                         alt=""></a>
                        <div class="categories-content">
                            <h3>送恋人</h3>
                            <h4>所有怦然心动，都是你</h4>
                        </div>
                    </div>
                </div>
                <div class="cat-2 col-md-8">
                    <div class="row">
                        <div class="cat-3 col-md-7">
                            <div class="categories-img img-full mb-30">
                                <a href="#"><img src="/myimg/c2.png" alt=""></a>
                                <div class="categories-content">
                                    <h3>送长辈</h3>
                                    <h4>谢谢你 我爱你</h4>
                                </div>
                            </div>
                        </div>
                        <div class="cat-4 col-md-5">
                            <div class="categories-img img-full mb-30">
                                <a href="#"><img src="/myimg/c3.png" alt=""></a>
                                <div class="categories-content">
                                    <h3>设计师臻选</h3>
                                    <h4>臻选稀有花材</h4>
                                </div>
                            </div>
                        </div>
                        <div class="cat-5 col-md-4">
                            <div class="categories-img img-full mb-30">
                                <a href="#"><img src="/myimg/c4.png" alt=""></a>
                                <div class="categories-content">
                                    <h3>生日祝福</h3>
                                    <h4>不管几岁，快乐万岁</h4>
                                </div>
                            </div>
                        </div>
                        <div class="cat-6 col-md-8">
                            <div class="categories-img img-full mb-30">
                                <a href="#"><img src="/myimg/c5.png" alt=""></a>
                                <div class="categories-content">
                                    <h3>送朋友</h3>
                                    <h4>久违亦如初见</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Categories Area End-->
    <!--Product Area Start-->
    <div class="product-area mt-85">
        <div class="container">
            <div class="row">
                <!--Section Title Start-->
                <div class="col-12">
                    <div class="section-title text-center mb-35">
                        <span>The Most Trendy</span>
                        <h3>Featured Products</h3>
                    </div>
                </div>
                <!--Section Title End-->
            </div>
            <div class="row">
                <div class="product-slider-active" id="main-product">
                    <div class="col-md-3 col-lg-3 col-sm-4 col-xs-12">
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product1.jpg" alt="">
                                </a>
                                <span class="onsale">Sale!</span>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Eleifend quam</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$115.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product2.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Odio tortor consequat</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$90.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-4 col-xs-12">
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product3.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Commodo dolor</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$80.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product4.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Fusce tempor</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$55.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-4 col-xs-12">
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product5.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Integer eget augue</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$100.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product6.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Egestas dapibus</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$55.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-4 col-xs-12">
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product7.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Auctor sem</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$100.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product8.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Sapien libero</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$82.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-4 col-xs-12">
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product9.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Pharetra sagittis</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$100.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product10.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Turpis et iaculis</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$65.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-4 col-xs-12">
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product11.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Sit amet felis</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$90.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                        <!--Single Product Start-->
                        <div class="single-product mb-25">
                            <div class="product-img img-full">
                                <a href="single-product.html">
                                    <img src="/static/moban/img/product/product12.jpg" alt="">
                                </a>
                                <div class="product-action">
                                    <ul>
                                        <li><a href="#open-modal" data-toggle="modal" title="Quick view"><i
                                                class="fa fa-search"></i></a></li>
                                        <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                        <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-content">
                                <h2><a href="single-product.html">Lacus dignissim</a></h2>
                                <div class="product-price">
                                    <div class="price-box">
                                        <span class="regular-price">$80.00</span>
                                    </div>
                                    <div class="add-to-cart">
                                        <a href="#">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Single Product End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Product Area End-->
    <!--Product Countdown Area Start-->
    <div class="product-countdown-area mt-105 ml-50 mr-50">
        <div class="container">
            <div class="row">
                <!--Section Title Start-->
                <div class="col-12">
                    <div class="section-title text-center mb-30">
                        <h3>Deal of The Day</h3>
                    </div>
                </div>
                <!--Section Title End-->
            </div>
            <div class="row">
                <div class="col-lg-8 col-md-10 col-12 ml-auto mr-auto mb-20">
                    <!--Count Down Area Start-->
                    <div class="count-down-area">
                        <!--Count Down Start-->
                        <div class="countdown-inner">
                            <div class="count-box">
                                <div class="pro-countdown" data-countdown="2035/10/01"></div>
                            </div>
                        </div>
                        <!--Count Down End-->
                        <!--Count Down Start-->
                        <div class="countdown-inner">
                            <div class="count-box">
                                <div class="pro-countdown" data-countdown="2033/10/01"></div>
                            </div>
                        </div>
                        <!--Count Down End-->
                        <!--Count Down Start-->
                        <div class="countdown-inner">
                            <div class="count-box">
                                <div class="pro-countdown" data-countdown="2033/10/01"></div>
                            </div>
                        </div>
                        <!--Count Down End-->
                        <!--Count Down Start-->
                        <div class="countdown-inner">
                            <div class="count-box">
                                <div class="pro-countdown" data-countdown="2033/10/01"></div>
                            </div>
                        </div>
                        <!--Count Down End-->
                        <!--Count Down Start-->
                        <div class="countdown-inner">
                            <div class="count-box">
                                <div class="pro-countdown" data-countdown="2033/10/01"></div>
                            </div>
                        </div>
                        <!--Count Down End-->
                    </div>
                    <!--Count Down Area End-->
                </div>
            </div>
            <div class="row">
                <div class="offer-slider">
                    <c:forEach var="item" items="${sessionScope.random}">
                        <div class="col-md-4">
                            <!--Single Product Start-->
                            <div class="single-product mb-25">
                                <div class="product-img img-full">
                                    <a href="/Goods/product?id=${item.id}">
                                        <img src="/myimg/${item.img}" alt="">
                                    </a>
                                    <span class="onsale">Sale!</span>
                                    <div class="product-action">
                                        <ul>
                                            <li>
                                                <a href="#open-modal" data-toggle="modal" title="Quick view"
                                                   onclick="getShopInfo(${item.id})">
                                                    <i class="fa fa-search"></i></a>
                                            </li>
                                            <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                            <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h2><a href="/Goods/product?id=${item.id}">${item.name}</a></h2>
                                    <div class="product-price">
                                        <div class="price-box">
                                            <span class="regular-price">${item.price}元</span>
                                        </div>
                                        <div class="add-to-cart">
                                            <a onclick="addCartOne(${item.id})">加入购物车</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Single Product End-->
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <!--Product Countdown Area End-->
    <!--Banner Area Start-->
    <div class="banner-area pt-105">
        <div class="container-fluid pl-50 pr-50">
            <div class="row">
                <div class="col-md-4">
                    <!--Single Banner Area Start-->
                    <div class="single-banner mb-35">
                        <div class="banner-img">
                            <a href="#">
                                <img src="/static/moban/img/banner/banner1.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <!--Single Banner Area End-->
                </div>
                <div class="col-md-4">
                    <!--Single Banner Area Start-->
                    <div class="single-banner mb-35">
                        <div class="banner-img">
                            <a href="#">
                                <img src="/static/moban/img/banner/banner2.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <!--Single Banner Area End-->
                </div>
                <div class="col-md-4">
                    <!--Single Banner Area Start-->
                    <div class="single-banner mb-35">
                        <div class="banner-img">
                            <a href="#">
                                <img src="/static/moban/img/banner/banner3.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <!--Single Banner Area End-->
                </div>
            </div>
        </div>
    </div>
    <!--Banner Area End-->

    <!--Brand Area Start-->
    <div class="brand-area mt-100">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="brand-active">
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand1.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand2.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand3.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand4.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand5.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand3.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand4.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand5.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Brand Area End-->

    <!--Footer Area Start-->
    <footer>
        <div class="footer-container">
            <!--Footer Top Area Start-->
            <div class="footer-top-area black-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>My Account</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Team Member</a></li>
                                    <li><a href="#">Career</a></li>
                                    <li><a href="#">Specials</a></li>
                                    <li><a href="shop.html">Best sellers</a></li>
                                    <li><a href="#">Our stores</a></li>
                                    <li><a href="#">Contact us</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Information</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                    <li><a href="#">My orders</a></li>
                                    <li><a href="#">Terms & Conditions</a></li>
                                    <li><a href="#">Returns & Exchanges</a></li>
                                    <li><a href="#">Shipping & Delivery</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Quick Links</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">Support Center</a></li>
                                    <li><a href="#">Term & Conditions</a></li>
                                    <li><a href="#">Shipping</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                    <li><a href="#">Help</a></li>
                                    <li><a href="#">Products Return</a></li>
                                    <li><a href="#">FAQS</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Categories</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">Bedroom</a></li>
                                    <li><a href="#">Furniture</a></li>
                                    <li><a href="#">Livingroom</a></li>
                                    <li><a href="#">Mobiles & Tablets</a></li>
                                    <li><a href="#">Men</a></li>
                                    <li><a href="#">Women</a></li>
                                    <li><a href="#">Accessories</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Top Area End-->
            <!--Footer Middle Area Start-->
            <div class="footer-middle-area black-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-logo">
                                    <a href="/page/index.jsp"><img src="/static/moban/img/logo/logo-footer.png" alt=""></a>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-home"></i>
                                    </div>
                                    <p>Address : No 40 Baria Sreet 15/2 NewYork City, NY, United States.</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-envelope-open-o"></i>
                                    </div>
                                    <p>Email: <br>info@yourmail.com</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-mobile"></i>
                                    </div>
                                    <p>Phone: <br>(+68) 123 456 7890</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Middle Area End-->
            <!--Footer Bottom Area Start-->
            <div class="footer-bottom-area black-bg pt-50 pb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!--Footer Payment Start-->
                            <div class="footer-payments-image">
                                <img src="/static/moban/img/payment/payment-icon.png" alt="">
                            </div>
                            <!--Footer Payment End-->
                            <!--Footer Menu Start-->
                            <div class="footer-menu text-center">
                                <nav>
                                    <ul>
                                        <li><a href="#">Site Map</a></li>
                                        <li><a href="#">Search Terms</a></li>
                                        <li><a href="#">Advanced Search</a></li>
                                        <li><a href="#">Orders and Returns</a></li>
                                        <li><a href="#">Contact Us</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <!--Footer Menu End-->
                            <!--Footer Copyright Start-->
                            <div class="footer-copyright">
                                <p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
                                                                                             href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                                </p>
                            </div>
                            <!--Footer Copyright End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Bottom Area End-->
        </div>
    </footer>
    <!--Footer Area End-->
    <!-- Modal Area Strat -->
    <div class="modal fade" id="open-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                            class="fa fa-close"></i></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!--Modal Img-->
                        <div class="col-md-5">
                            <!--Modal Tab Content Start-->
                            <div class="tab-content product-details-large" id="myTabContent">
                                <div class="tab-pane fade show active" id="single-slide1" role="tabpanel"
                                     aria-labelledby="single-slide-tab-1">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product1.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide2" role="tabpanel"
                                     aria-labelledby="single-slide-tab-2">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product2.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide3" role="tabpanel"
                                     aria-labelledby="single-slide-tab-3">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product3.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide4" role="tabpanel"
                                     aria-labelledby="single-slide-tab-4">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product4.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide5" role="tabpanel"
                                     aria-labelledby="single-slide-tab-4">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product5.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide6" role="tabpanel"
                                     aria-labelledby="single-slide-tab-4">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product6.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                            </div>
                            <!--Modal Content End-->
                            <!--Modal Tab Menu Start-->
                            <div class="single-product-menu">
                                <div class="nav single-slide-menu owl-carousel" role="tablist">
                                    <div class="single-tab-menu img-full">
                                        <a class="active" data-toggle="tab" id="single-slide-tab-1"
                                           href="#single-slide1"><img
                                                src="/static/moban/img/single-product/small/single-product1.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-2" href="#single-slide2"><img
                                                src="/static/moban/img/single-product/small/single-product2.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-3" href="#single-slide3"><img
                                                src="/static/moban/img/single-product/small/single-product3.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-4" href="#single-slide4"><img
                                                src="/static/moban/img/single-product/small/single-product4.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-5" href="#single-slide5"><img
                                                src="/static/moban/img/single-product/small/single-product5.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-6" href="#single-slide6"><img
                                                src="/static/moban/img/single-product/small/single-product6.jpg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <!--Modal Tab Menu End-->
                        </div>
                        <!--Modal Img-->
                        <!--Modal Content-->
                        <div class="col-md-7">
                            <div class="modal-product-info">
                                <h1>Sit voluptatem</h1>
                                <div class="modal-product-price">
                                    <span class="old-price">$74.00</span>
                                    <span class="new-price">$69.00</span>
                                </div>
                                <a href="single-product.html" class="see-all">See all features</a>
                                <div class="add-to-cart quantity">
                                    <form class="add-quantity" action="#">
                                        <div class="modal-quantity">
                                            <input class="number" type="number" value="1">
                                        </div>
                                        <div class="add-to-link">
                                            <button class="form-button" data-text="add to cart">add to cart</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="cart-description">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        nostrud exercitation ullamco,Proin lectus ipsum, gravida et mattis vulputate,
                                        tristique ut lectus.</p>
                                </div>
                                <div class="social-share">
                                    <h3>Share this product</h3>
                                    <ul class="socil-icon2">
                                        <li><a href=""><i class="fa fa-facebook"></i></a></li>
                                        <li><a href=""><i class="fa fa-twitter"></i></a></li>
                                        <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--Modal Content-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Area End -->


</div>


<!--All Js Here-->

<!--Jquery 1.12.4-->
<script src="/static/moban/js/vendor/jquery-1.12.4.min.js"></script>
<!--Popper-->
<script src="/static/moban/js/popper.min.js"></script>
<!--Bootstrap-->
<script src="/static/moban/js/bootstrap.min.js"></script>
<!--Imagesloaded-->
<script src="/static/moban/js/imagesloaded.pkgd.min.js"></script>
<!--Isotope-->
<script src="/static/moban/js/isotope.pkgd.min.js"></script>
<!--Waypoints-->
<script src="/static/moban/js/waypoints.min.js"></script>
<!--Counterup-->
<script src="/static/moban/js/jquery.counterup.min.js"></script>
<!--Carousel-->
<script src="/static/moban/js/owl.carousel.min.js"></script>
<!--Slick-->
<script src="/static/moban/js/slick.min.js"></script>
<!--Meanmenu-->
<script src="/static/moban/js/jquery.meanmenu.min.js"></script>
<!--Easyzoom-->
<script src="/static/moban/js/easyzoom.min.js"></script>
<!--Nice Select-->
<script src="/static/moban/js/jquery.nice-select.min.js"></script>
<!--ScrollUp-->
<script src="/static/moban/js/jquery.scrollUp.min.js"></script>
<!--Wow-->
<script src="/static/moban/js/wow.min.js"></script>
<!--Venobox-->
<script src="/static/moban/js/venobox.min.js"></script>
<!--Jquery Ui-->
<script src="/static/moban/js/jquery-ui.js"></script>
<!--Countdown-->
<script src="/static/moban/js/jquery.countdown.min.js"></script>
<!--Plugins-->
<script src="/static/moban/js/plugins.js"></script>
<!--Main Js-->
<script src="/static/moban/js/main.js"></script>


<script src="/static/js/goods.js"></script>

<script>
    $(document).ready(function () {
        $.ajax({
            url: "/Goods/RandomGoods",
            data: "num=16",
            success: function (data) {
                // console.log(data.length);

                var context = "";

                for (var i = 0; i + 1 < data.length; i = i + 2) {
                    //两个产品一组
                    context += '<div class="col-md-3 col-lg-3 col-sm-4 col-xs-12 product-box">' +
                        '<div class="single-product mb-25">' +
                        '<div class="product-img img-full">' +
                        '<a href="/Goods/product?id=' + data[i].id + '">' +
                        '<img src="' + data[i].img + '" alt="">' +
                        '</a>' +
                        // '<span class="onsale">Sale!</span>' +
                        '<div class="product-action">' +
                        '<ul>' +
                        '<li><a href="#open-modal" data-toggle="modal" title="Quick view" onclick="getShopInfo(' + data[i].id + ')"><i class="fa fa-search"></i></a></li>' +
                        '<li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>' +
                        '<li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>' +
                        '</ul>' +
                        '</div>' +
                        '</div>' +
                        '<div class="product-content">' +
                        '<h2><a href="/Goods/product?id=' + data[i].id + '">' + data[i].name + '</a></h2>' +
                        '<div class="product-price">' +
                        '<div class="price-box">' +
                        '<span class="regular-price">' + data[i].price + '元</span>' +
                        '</div>' +
                        '<div class="add-to-cart" onclick="addCartOne(' + data[i].id + ')">' +
                        '<a >加入购物车</a>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        //单一产品隔离
                        '<div class="single-product mb-25">' +
                        '<div class="product-img img-full">' +
                        '<a href="/Goods/product?id=' + data[i + 1].id + '">' +
                        '<img src="' + data[i + 1].img + '" alt="">' +
                        '</a>' +
                        '<div class="product-action">' +
                        '<ul>' +
                        '<li><a href="#open-modal" data-toggle="modal" title="Quick view" onclick="getShopInfo(' + data[i + 1].id + ')"><i class="fa fa-search"></i></a></li>' +
                        '<li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>' +
                        '<li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>' +
                        '</ul>' +
                        '</div>' +
                        '</div>' +
                        '<div class="product-content">' +
                        '<h2><a href="/Goods/product?id=' + data[i + 1].id + '">' + data[i + 1].name + '</a></h2>' +
                        '<div class="product-price">' +
                        '<div class="price-box">' +
                        '<span class="regular-price">' + data[i + 1].price + '元</span>' +
                        '</div>' +
                        '<div class="add-to-cart" onclick="addCartOne(' + data[i + 1].id + ')">' +
                        '<a >加入购物车</a>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                }

                $("#main-product").html(context);

            },
            error: function (err) {

                console.log(err);
            }
        })
    })


</script>
</body>
</html>


